<template>
  <div id="app">
    <ru-button disabled>禁用按钮</ru-button>&nbsp;&nbsp;
    <ru-button>正常按钮</ru-button>&nbsp;&nbsp;
    <ru-button type="primary">主要按钮</ru-button>&nbsp;&nbsp;
    <ru-button size="small">小型按钮</ru-button>&nbsp;&nbsp;
    <ru-button size="mini">迷你按钮</ru-button>
    <br>
    <br>
    <br>
    <br>
    <ru-button @click="showDialog">Dialog</ru-button>
    <ru-dialog 
      :visible.sync="dialogVisible"
      :close-on-click-modal="modalCheck"
      title="Dialog标题">
      <h3>点击遮罩层是否可关闭对话框</h3>
      <ru-button @click="modalclick">切换</ru-button>
      <slot slot="footer">
        <ru-button type="primary" style="margin-right: 16px">确定</ru-button>
        <ru-button @click="closeDialog">取消</ru-button>
      </slot>
    </ru-dialog>&nbsp;&nbsp;
    <ru-button @click="dialogVisible2 = true">Dialog</ru-button>
    <ru-dialog 
      :visible.sync="dialogVisible2"
      :before-close="handleClose"
      title="Dialog标题">
      <h3>Dialog内容</h3>
      <slot slot="footer">
        <ru-button type="primary" style="margin-right: 16px">确定</ru-button>
        <ru-button @click="dialogVisible2 = false">取消</ru-button>
      </slot>
    </ru-dialog>&nbsp;&nbsp;
    <ru-button @click="dialogVisible1 = true">嵌套Dialog</ru-button>
    <ru-dialog 
      :visible.sync="dialogVisible1"
      width="60%"
      title="Dialog标题">
      <h3>Dialog内容</h3>
      <ru-dialog
        width="40%"
        title="内层 Dialog"
        :visible.sync="innerVisible"
        append-to-body>
        <h3>内层Dialog内容</h3>
      </ru-dialog>
      <slot slot="footer">
        <ru-button @click="dialogVisible1 = false" style="margin-right: 16px">取消</ru-button>
        <ru-button @click="innerVisible = true">打开内层 Dialog</ru-button>
      </slot>
    </ru-dialog>
    <br>
    <br>
    <ru-button @click="showMessage('info')">常规</ru-button>&nbsp;&nbsp;
    <ru-button @click="showMessage('success')">成功</ru-button>&nbsp;&nbsp;
    <ru-button @click="showMessage('warning')">警告</ru-button>&nbsp;&nbsp;
    <ru-button @click="showMessage('error')">错误</ru-button>&nbsp;&nbsp;
    <ru-button @click="showMessage1()">错误</ru-button>&nbsp;&nbsp;
    <ru-button @click="showMessage2()">使用 HTML 片段</ru-button>
    <br>
    <br>
    <ru-radio v-model="radioValue" :label="true"  @change="changeRadio">单选正常</ru-radio>&nbsp;&nbsp;&nbsp;&nbsp;
    <ru-radio v-model="radioValue1" :label="true" disabled>单选禁用</ru-radio>
    <ru-radio-group v-model="radioGroupValue" @change="changeRadio">
      <ru-radio :label="1">选项一</ru-radio>
      <ru-radio :label="2">选项二</ru-radio>
    </ru-radio-group>
    <ru-checkbox v-model="checkboxValue">多选正常</ru-checkbox>
    <ru-checkbox disabled>多选禁用</ru-checkbox>
    <ru-checkbox-group v-model="checkboxGroupValue">
      <ru-checkbox label="A" checked></ru-checkbox>
      <ru-checkbox label="B"></ru-checkbox>
      <ru-checkbox label="C"></ru-checkbox>
      <ru-checkbox label="D"></ru-checkbox>
    </ru-checkbox-group>
    <ru-checkbox-group :min="0" :max="2" v-model="checkboxGroupValue1">
      <ru-checkbox label="A">A</ru-checkbox>
      <ru-checkbox label="B">B</ru-checkbox>
      <ru-checkbox label="C">C</ru-checkbox>
      <ru-checkbox label="D">D</ru-checkbox>
    </ru-checkbox-group>
    <ru-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</ru-checkbox>
    <ru-checkbox-group v-model="checkboxGroupValueAll" @change="handleCheckedCitiesChange">
      <ru-checkbox label="北京">北京</ru-checkbox>
      <ru-checkbox label="上海">上海</ru-checkbox>
      <ru-checkbox label="天津">天津</ru-checkbox>
    </ru-checkbox-group>
    <br>
    <br>
    <ru-tree
      ref="ruTree"
      :data="treeData"
      draggable
      show-checkbox
      default-expand-all
      accordion
      :allow-drag="onAllowDrag"
      :allow-drop="onAllowDrop"
      :filter-node-method="filterMethod"
      node-key="id"
      :props="{
        children: 'children',
        label: 'label'
      }"></ru-tree>
      <br>
      <br>
      <ru-table :data="tableData">
        <ru-table-column label="name" prop="name"></ru-table-column>
        <ru-table-column label="age" prop="age"></ru-table-column>
      </ru-table>
      <br>
      <br>
      <ru-table :data="tableData" :show-header="false">
        <ru-table-column label="name" prop="name"></ru-table-column>
        <ru-table-column label="age" prop="age"></ru-table-column>
      </ru-table>
      <br>
      <br>
      <ru-table :data="[]" empty-text="asdsadasdsa">
        <ru-table-column label="name" prop="name"></ru-table-column>
        <ru-table-column label="age" prop="age"></ru-table-column>
      </ru-table>
    <br><br>
    常规输入框
    <ru-input placeholder="请输入内容" v-model="inputValue1" clearable></ru-input>
    &nbsp;&nbsp;
    禁用输入框
    <ru-input disabled></ru-input>
    &nbsp;&nbsp;
    密码类型输入框
    <ru-input placeholder="请输入密码" v-model="inputValue2" show-password></ru-input>
    &nbsp;&nbsp;<br><br>
    常规文本域（设置固定显示行数）
    <ru-input :rows="4" v-model="inputValue3" type="textarea"></ru-input>
    &nbsp;&nbsp;
    禁用文本域
    <ru-input v-model="inputValue4" type="textarea" disabled></ru-input>
    &nbsp;&nbsp;
    限制最少行和最多行文本域（可设置一个显示区间 ，如下例为2-4行的显示区域）
    <ru-input v-model="inputValue5" type="textarea" :autosize="{ minRows: 2, maxRows: 4}"></ru-input>
    &nbsp;&nbsp;
    自适应文本域
    <ru-input v-model="inputValue6" type="textarea" :show-word-limit="true" autosize></ru-input>
    &nbsp;&nbsp;
    <br><br><br>
    常规计数器
    <ru-input-number v-model="inputNumValue1" ></ru-input-number>
    &nbsp;&nbsp;
    限制精准度计数器（可设置精确到小数点后几位，下例为小数点后3位）
    <ru-input-number v-model="inputNumValue2" :precision="3"></ru-input-number>
    <br><br>
    设置步数计数器（可设置每次加减的数，下例为3）
    <ru-input-number v-model="inputNumValue3" :step="3"></ru-input-number>
    &nbsp;&nbsp;
    禁用计数器
    <ru-input-number controls disabled></ru-input-number>
    &nbsp;&nbsp;
    <br><br><br>
    常规下拉选择器
    <ru-select v-model="SelectValue1" placeholder="请选择">
        <ru-option label="阿斯顿撒" value="阿斯顿撒"></ru-option>
        <ru-option label="阿斯顿撒多" value="阿斯顿撒多"></ru-option>
        <ru-option label="阿萨德阿斯顿撒多" value="阿萨德阿斯顿撒多"></ru-option>
    </ru-select>
    <br><br>
    禁用下拉选择器
    <ru-select  v-model="SelectValue4" disabled placeholder="请选择">
        <ru-option label="阿斯顿撒" value="阿斯顿撒"></ru-option>
        <ru-option label="阿斯顿撒多" value="阿斯顿撒多"></ru-option>
        <ru-option label="阿萨德阿斯顿撒多" value="阿萨德阿斯顿撒多"></ru-option>
    </ru-select>
    <br><br>
    多选下拉选择器
    <ru-select v-model="SelectValue2" multiple placeholder="请选择">
        <ru-option label="阿斯顿撒" value="1"></ru-option>
        <ru-option label="阿斯顿撒多" value="2"></ru-option>
        <ru-option label="阿萨德阿斯顿撒多" value="3"></ru-option>
    </ru-select>
    <br><br>
    合并多选标签下拉选择器
    <ru-select v-model="SelectValue3" multiple collapse-tags placeholder="请选择">
        <ru-option label="阿斯顿撒" value="1"></ru-option>
        <ru-option label="阿斯顿撒多" value="2"></ru-option>
        <ru-option label="阿萨德阿斯顿撒多" value="3"></ru-option>
    </ru-select>
    <br><br><br><br>
    基础分页
    <ru-pagination layout="prev, pager, next" :total="100"></ru-pagination>
    <br><br><br><br>
    调整按钮个数分页(可设置页码按钮的数量，当总页数超过该值时会折叠 下例为 9)
    <ru-pagination :pager-count='9' layout="prev, pager, next" :total="100"></ru-pagination>
    <br><br><br><br>
    分页完整功能（可根据需求进行控制功能显示；如：总条数、每页条数、跳页功能）
    <ru-pagination  layout="total, sizes, prev, pager, next, jumper" :total="100"></ru-pagination>
    <br><br><br><br>
    <div style="width:400px;">
      表单对齐方式可设置<br><br>
      <ru-button @click="labelPosition='left'">左对齐</ru-button>&nbsp;&nbsp;
      <ru-button @click="labelPosition='right'">右对齐</ru-button>&nbsp;&nbsp;
      <ru-button @click="labelPosition='top'">顶部对齐</ru-button>
      <ru-form ref="form" :label-position="labelPosition" :model="form" label-width="120px">
        <ru-form-item label="活动名称">
          <ru-input v-model="form.name"></ru-input>
        </ru-form-item>
        <ru-form-item label="活动区域">
          <ru-select v-model="form.region" placeholder="请选择活动区域">
            <ru-option label="区域一" value="shanghai"></ru-option>
            <ru-option label="区域二" value="beijing"></ru-option>
          </ru-select>
        </ru-form-item>
        <ru-form-item label="特殊资源">
          <ru-radio-group v-model="form.resource">
            <ru-radio label="线上品牌商赞助"></ru-radio>
            <ru-radio label="线下场地免费"></ru-radio>
          </ru-radio-group>
        </ru-form-item>
        <ru-form-item label="活动形式">
          <ru-input type="textarea" v-model="form.desc"></ru-input>
        </ru-form-item>
      </ru-form>
          <ru-button @click="aa">立即创建</ru-button>
          <ru-button>取消</ru-button>
    </div>
    <br><br><br><br>
    表单加校验<br><br>
    <div style="width:400px;">
      <ru-form ref="form1" :rules="rules"  :model="form1" label-width="120px">
        <ru-form-item label="活动名称" prop="name">
          <ru-input v-model="form1.name"></ru-input>
        </ru-form-item>
        <ru-form-item label="活动区域" prop="region">
          <ru-select v-model="form1.region" placeholder="请选择活动区域">
            <ru-option label="区域一" value="shanghai"></ru-option>
            <ru-option label="区域二" value="beijing"></ru-option>
          </ru-select>
        </ru-form-item>
        <ru-form-item label="特殊资源" prop="resource">
          <ru-radio-group v-model="form1.resource">
            <ru-radio label="线上品牌商赞助"></ru-radio>
            <ru-radio label="线下场地免费"></ru-radio>
          </ru-radio-group>
        </ru-form-item>
        <ru-form-item label="活动形式" prop="desc">
          <ru-input type="textarea" v-model="form1.desc"></ru-input>
        </ru-form-item>
      </ru-form>
          <ru-button  @click="submitForm('form1')">立即创建</ru-button>
          <ru-button>取消</ru-button>
    </div>
  </div>
</template>

<script>


export default {
  name: 'App',
  data () {
    return {
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      innerVisible: false,
      modalCheck: true,
      radioValue: false,
      radioValue1: false,
      radioGroupValue: 0,
      checkboxValue: false,
      checkboxGroupValue: [],
      checkboxGroupValue1: [],
      checkboxGroupValueAll: [],
      checkAll: false,
      isIndeterminate: false,
      treeData: [
        {
          label: '父级',
          id: '1',
          children: [
            {
              label: '子级1',
              id: '2'
            },
            {
              label: '子级2',
              id: '3'
            }
          ]
        }
      ],
      treeData1: [
        
      ],
      textValue: '',
      tableData: [
        {
          name: "XXXX",
          age: 1000
        },
        {
          name: "SASDA",
          age: 1500
        }
      ],
      inputValue1:'',
      inputValue2:'',
      inputValue3:'',
      inputValue4:'',
      inputValue5:'',
      inputValue6:'',
      inputNumValue1:0,
      inputNumValue2:0,
      inputNumValue3:0,
      SelectValue1:'',
      SelectValue2:[],
      SelectValue3:[],
      SelectValue4:'',
      labelPosition:'left',
      form: {
        name: '',
        region: '',
        type: [],
        resource: '',
        desc: ''
      },
      form1: {
        name: '',
        region: '',
        type: [],
        resource: '',
        desc: ''
      },
      rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          resource: [
            { required: true, message: '请选择活动资源', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '请填写活动形式', trigger: 'blur' }
          ]
        }
    }
  },
  methods: {
    showDialog() {
      this.dialogVisible = true
    },
    closeDialog() {
      this.dialogVisible = false
    },
    showMessage(type) {
      this.$message({
        type: type,
        message: type
      })
    },
    showMessage1() {
        this.$message.error('error')
    },
    showMessage2() {
          this.$message({
            dangerouslyUseHTMLString:true,
            message: '<strong>这是 <i>HTML</i> 片段</strong>'
          })
    },
    handleClose(done) {
      this.$message.success('关闭了!')
      done()
    },
    modalclick(){
      if(this.modalCheck){
        this.modalCheck = false
      }else{
        this.modalCheck = true
      }
    },
    changeRadio(val) {
      this.$message({
        type: 'success',
        message: val
      })
    },
    aa(){
      console.log(this.form1,'form1')
    },
    aaaa(aa){
      console.log(aa,'aa')
    },
    
    handleCheckAllChange(val) {
      this.checkboxGroupValueAll = val ? ['北京','上海', '天津'] : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === 3;
        this.isIndeterminate = checkedCount > 0 && checkedCount < 3;
    },
    loadNode(node, resolve) {
        if (node.level === 0) {
          return resolve([{ label: 'XXXX' }]);
        }
        if (node.level > 1) return resolve([]);

        setTimeout(() => {
          const data = [{
            label: 'leaf',
            leaf: true
          }, {
            label: 'zone'
          }];

          resolve(data);
        }, 500);
    },
    // eslint-disable-next-line no-unused-vars
    renderContent(h, { node, data, store }) {
      return (
        <span class="custom-tree-node">
          <span>{node.label}</span>
          <span>
            <ru-button size="mini"  on-click={ () => console.log('XXXX') }>Append</ru-button>
            <ru-button size="mini"  on-click={ () => console.log('XXXX') }>Delete</ru-button>
          </span>
        </span>);
    },
    filterMethod(value, data) {
      return data.label.indexOf(value) !== -1;
    },
    onAllowDrag(node) {
      return node.label !== 'X1' ? true: false
    },
    // eslint-disable-next-line no-unused-vars
    onAllowDrop(draggingNode, dropNode, type) {
      return dropNode.data.label !== 'X2'
    },
    submitForm(formName) {

        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
  }
}
</script>

<style lang="scss">

</style>
